<template>
  <div class="card">
    <!-- <a-button type="primary" style="float:right"> 新增产品</a-button> -->
    <div class="cardContainer">
      <div class="card-item" v-for="(item, index) in state.productList" :key="index" :style="color[index%10]" @click="chickProject(item.id)">
        <div
          class="item"
          >
          {{ item.name }}
        </div>
        <!-- <a-card
          :bodyStyle="{background: '#E51400'}"
          hoverable
          class="item"
          :title="item.name"
          style="font-size: 30px"
          :product-id="item.id"
          :data-title="item.name"
          @click="chickProject(item.id)"
        >
        </a-card> -->
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { reactive } from "@vue/reactivity";
import { productApi } from "@/api/devcloudApi";
import store from "@/store";
import {  useRouter } from "vue-router";

export default defineComponent({
  name: 'product',
  components: {
  },
  setup() {
    const router = useRouter()
    const color = ["background:#E51400", "background:#339933", "background:#1BA1E2", "background:#F09609", "background:#8CBF26", "background:#00ABA9", "background:#FF0097", "background:#E671B8", "background:#996600", "background:#A200FF"];
    const state = reactive({
        pageNum: 1,
        pageSize: 1000,
        productList: [
        ]
    });
    const listData = async ()=>{
        const res = await productApi.list({pageNum: state.pageNum, pageSize: state.pageSize})
        if(res.success){
          state.productList = res.result
        }
    }
    
    const chickProject = (productId) => {
      store.commit('setCurrInfo', {productId : productId, projectId: '', moduleId: ''})
      router.push({path: "/publish/project"})
    }
    
    listData();
    store.commit("toFlush", '');
    return {
        state,
        chickProject,
        color
    }
  }
});
</script>

<style lang="less" scoped>
.card {
    // display: flex;
    width: 100%;
    align-items: flex-start;
    min-height: 62vh;
    height: 100%;
    margin: 0;
    text-align: center;
    margin-top: 30px;

    .cardContainer {
        box-sizing: border-box;
        height: 100%;
        width: 60%;
        margin: 15px auto;
        display: flex;
        flex-wrap: wrap;

        .card-item {
          display: flex;
          justify-content: center;
          align-items: center;
          margin: 10px;
          width: 150px;
          height: 150px;
          opacity: .9;
          border:1px solid #ddd;
          cursor: pointer;
          opacity: 0.8;

          .item{
            font-size: 16px;
            color:#FFF
          }
        }

        .card-item:hover {
          opacity: 1.0;
          transition-duration: 0.4s;
          box-shadow: 0 1px 2px -2px rgb(0 0 0 / 16%), 0 3px 6px 0 rgb(0 0 0 / 12%), 0 5px 12px 4px rgb(0 0 0 / 9%);
        }

    }
}



</style>
